<template>
  <div style="height:100%">
    <!-- 头部导航 -->
    <!-- <div :style="{opacity:opacity}" class="bg"></div> -->
    <van-nav-bar fixed @click-left="onClickLeft" :border="false">
      <template #left>
        <van-icon class="arrow-left" size="5.333vw" name="arrow-left" color="#333" />
      </template>
      <template #title>
        <div class="title">
          <div class="nav-tit">
            <a class="active" href="#">商品</a>
          </div>
          <div class="nav-tit">
            <a href="#">评价</a>
          </div>
          <div class="nav-tit">
            <a href="#">详情</a>
          </div>
        </div>
      </template>
      <template #right>
        <span>
          <van-icon name="star-o" size="5.333vw" color="#333" />
        </span>
        <span>
          <van-icon name="bullhorn-o" size="5.333vw" color="#333" />
        </span>
      </template>
    </van-nav-bar>

    <div class="main" v-if="list.length!=0">
      <!-- 商品展示轮播 -->
      <section>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img :src="image.local_url" />
          </van-swipe-item>
        </van-swipe>

        <!-- 拼团情况 -->
        <div class="pintuan">
          <p>
            拼团价
            <span>2人团</span>
            <span>拼团包邮</span>
          </p>
          <div class="pintuan-price">
            <i>￥</i>
            <span class="now_price">39.9</span>
            <del class="old_price">￥79</del>
            <span class="yituan">已团122</span>
          </div>
        </div>

        <!-- 商品价格 -->
        <p class="price">
          <i>￥</i>
          <b>{{title}}</b>
          <del>￥{{list.market_price}}</del>
        </p>
        <div class="title-s">{{list.brand_name+list.product_name}}</div>

        <!-- 选择尺寸颜色模块 -->
        <div class="SelectName" @click="showPopup">
          <p>
            <span class="xz">请选择</span>
            <span>颜色，尺码</span>
            <van-icon class="arrow" size="4.267vw" name="arrow" />
          </p>
          <div class="clolr_mod">
            <span class="coloe_img">
              <img src="https://img06.miyabaobei.com/d1/p6/other/20521015733501_1.jpg" alt />
            </span>
            <span>
              <img src="https://img06.miyabaobei.com/d1/p6/other/20521015806834_1.jpg" alt />
            </span>
            <span>
              <img src="https://img06.miyabaobei.com/d1/p6/other/20521015817785_1.jpg" alt />
            </span>
            <!-- <span>
                    <img src="https://img07.miyabaobei.com/d1/p5/item/0/0/1865081938688_1_ea2d7c58.jpg" alt="">
            </span>-->
            <i>共3色可选</i>
          </div>
        </div>
        <!-- 加入购物车的弹出层 -->
         <van-popup v-model="Show" closeable position="bottom" :style="{ height: '80%' }">
          <div class="card-header">
            <img :src="list.default_picture.local_url" alt />
            <div class="price">
              <span>
                ￥
                <strong>{{title}}</strong>
              </span>
              <i v-if="list.groupon_promotion">拼团</i>
              <del>￥{{list.market_price}}</del>
              <p class="stock">库存充足</p>
              <p class="prop">
                <span>请选择  </span>{{key_res[1]}}
              </p>
            </div>
        </div>

        <!-- 购物车颜色选择 -->
         <div class="popupSkuArea">           
             <div class="sku_choose"   >
              <div class="color">{{key_res[1]}}</div>
              <span 
              v-for="(item,index) in values_res[1]" :key="item"
               class="item" 
               :class="{'active' : tabIndex === index}"
               @click="spanMenu(index)"
               >{{item}}</span>
        </div>
        <!-- 购物车尺寸选择 -->

         <span class="color h" v-if="key_res[2]">
              <b>{{key_res[2]}}</b>
            </span> 
            <div class="sku_choose sku_kind">
              <span 
              v-for="(item,index) in values_res[2]" :key="index" 
              class="item"
               :class="{'active' : tabindex === index}"
                @click="tabMenu(index)"
               >{{item}}</span>
             </div> 
        </div>

        <!-- 购物车商品数量选择 -->
        <div class="pop-count">
              <span class="count">数量</span>
              <div class="num">
                <span class="minusBtn">-</span>
                <input type="number" value="1" maxlength="2" readonly />
                <span class="addBtn">+</span>
              </div>
        </div>

        <!-- 加入购物车按钮 -->
         <div class="pop-btns">
              <button class="l_btn btn">
                <i>￥69</i>
                <br />单独购买
              </button>
              <button class="r_btn btn">
                <i>￥29</i>
                <br />拼团购买
              </button>
            </div>
        </van-popup>

        <!-- 服务版块 -->
        <p class="serveic" @click="show=true">
          <span>包邮</span>
          <span>七天放心退</span>
          <span>支持换货</span>
          <span>假一赔十</span>
          <van-icon size="4.267vw" name="arrow" />
        </p>

        <!-- 配送信息板块 -->
        <div class="address" @click="isShow=true">
          <van-action-sheet v-model="show">
            <div class="state">
              <span>配送</span>
              <span>
                <van-icon name="location-o" />重庆市重庆市九龙坡全境
              </span>
              <van-icon class="arrow" size="4.267vw" name="arrow" />
            </div>
            <div class="yunfei">
              <span>运费</span>
              <span>免运费</span>
              <van-icon size="4.267vw" class="arrow" name="arrow" />
            </div>
          </van-action-sheet>
          <!-- <div class="tit">
            <span></span>
            <van-icon size="4.267vw" class="arrow" name="arrow" />
          </div>-->
        </div>

        <div class="footurl">
          <img v-for="(item,index) in foot" :key="index" :src="item.local_url" alt />
        </div>
      </section>
      <!-- 加入购物车的弹出层 -->


      <!-- 服务板块弹出层 -->
      <van-action-sheet v-model="show" title="商品说明">
        <div class="content">
          <span>包邮</span>
          <p>本商品支持包邮，除港澳台和部分偏远地区(如新疆、青海、西藏等)外，您无需承担运费</p>
          <span>7天放心退</span>
          <p>符合消费者保障法规，可申请7天无理由退货</p>
          <span>支持换货</span>
          <p>符合消费者保障法规，本商品可申请换货服务</p>
          <span>正品保障</span>
          <p>所有商品均有太平洋保险承包产品质量保证险</p>
          <span>退货补运费</span>
          <p>商品支持退换货按距离首重补贴运费</p>
          <van-button type="primary" color="#f63a5d" size="large" @click="show = false">我知道了</van-button>
        </div>
      </van-action-sheet>

      <!-- 配送板块弹出层 -->
      <van-popup
        v-model="isShow"
        closeable
        position="bottom"
        :style="{ height: '30%' }"
      >
        <div class="ps">
          <h1>配送至</h1>
          <ul>
            <li>
              <span class="nowAdd">{{carmodel}}</span>
              <input type="radio" class="radio" checked="true">
            </li>
            <li class="chooseOther" @click="addShow=true">
              选择其它收货地址
              <span>></span>
            </li>
          </ul>
        </div>
      </van-popup>

      <!-- 新增地址弹出层 省市区三级联动-->
      <van-popup v-model="addShow" position="bottom" :style="{ height: '50%' }">
        <van-area
          title="地址选择"
          :area-list="areaList"
          :columns-placeholder="['请选择', '请选择', '请选择']"
          ref="myArea"
          @change="onChange"
          @confirm="onConfirm"
          @cancel="onCancel"
        />
      </van-popup>


      <!-- 吸底购物车 -->
      <div class="addCart">
        <a href>
          <img src="../assets/img/kf.png" alt />
        </a>
        <a href>
          <img class="img" src="../assets/img/gwc.png" alt />
          <i class="cartCount">2</i>
        </a>
        <span class="cartRight">加入购物车</span>
      </div>
    </div>
  </div>
</template>

<script>
import areaList from '../assets/area/area'
import BScroll from "better-scroll";
import axios from "axios";
import { get } from "utils/http";
import { NavBar } from "vant";
import { mapState } from "vuex";

export default {
  data() {
    return {
      activeName: "a",
      key_res: "",
      values_res: "",
      images: [],
      list: [],
      foot: [],
      show: false,
      Show: false,
      isShow: false,
      tabIndex: 0,
      tabindex: 0,
      title: "",
      id: ""
    };
  },
  computed: {
    ...mapState({
      productId: state => state.pid
    })
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    showPopup() {
      this.Show = true;
    },
    async created() {
      let pid = await get({
        url:
          "/item/info/4274574?identity_type=0&_=1596719250845&callback=ms_success_jsonpCallback",
        params: {
          token: ""
        }
      });
    },
    //value=0改变省，1改变市，2改变区
        onChange(picker, index, value){
            let val = picker.getValues();
            console.log(val)//查看打印
            let areaName = ''
            for (var i = 0; i<val.length; i++) {
                areaName = areaName+(i==0?'':' ')+val[i].name
            }
            this.carmodel = areaName
        },
        //确定选择城市
        onConfirm(val){
            console.log(val[0].name+","+val[1].name)
            this.addShow = false//关闭弹框
        },
        //取消选中城市
        onCancel(){
             this.addShow = false
             this.$refs.myArea.reset()// 重置城市列表
        },
    spanMenu(index) {
      if (index+1) {
        this.tabIndex = index;
      }
    },
    tabMenu(index) {
      if (index+1) {
       this.tabindex = index;
      }
    },
    _initScrollY() {
      this.bscroll = new BScroll(".main", {
        click: true,
        probeType: 3,
        scrollY: true,
        momentum: true
      });
    },
    getRouterData() {
      this.id = this.$route.query.productId;
      // console.log("id", this.id);
    }
  },
  mounted() {
    // this.bscroll.on("scroll", y => {
    //   let op = parseInt(y.y * -1);
    //   op = op / 100 >= 1 ? (op = 1) : op / 100;
    //   this.opacity = op;
    // });
  },
  async created() {
    let pid = await get({
      url: `/item/info/${this.productId}`
    });

    // let {top_pictures,groupon_price} = pid
    this.list = pid;
    console.log(this.list);
    this.images = this.list.top_pictures;
    this.foot = this.list.foot_pictures;
    // this.key_res = this.list.sale_property.key_res;
    // this.value_res = this.list.sale_property.values_res;

    let { key_res, values_res } = this.list.sale_property;
    this.key_res = key_res;
    this.values_res = values_res;
    if (this.list.groupon_promotion !== undefined) {
      this.title = this.list.groupon_promotion[0].groupon_price;
    } else {
      this.title = this.list.sale_price;
    }
    console.log(this.key_res, this.values_res[1]);
    this.$nextTick(() => {
      this._initScrollY();
    });
    this.getRouterData();
  }
};
</script>

<style lang="stylus" scoped>
.arrow-left {
  width: 0.34rem;
  // height .34rem
  padding: 0 !important;
  border-radius: 0.5rem;
  background: #fbfbfb;
  line-height: 0.34rem;
}

.van-nav-bar__left {
  padding: 0;
}

.van-nav-bar {
  background-color: transparent !important;
  overflow: hidden;
}

.nav-tit {
  display: inline-block;
  width: 0.34rem;
  height: 0.34rem;
  line-height: 0.34rem;
  border-radius: 50%;
  text-align: center;
  margin-top: 0.08rem;
  margin-left: 0.2rem;

  >a {
    color: #333;
    font-weight: 500;
  }
}

.title {
  opacity: 0;
  background: #fbfbfb;
  width: 100%;
  position: absolute;
  font-weight: 500;
  z-index: -1;
  left: 0;
  top: 0;
  height: 0.46rem !important;
}

// 拼团情况
.pintuan {
  height: 67.999px;
  background: #fc275d;
  color: #f8ffff;
  padding: 7.999px 10.001px 10.001px;
}

.pintuan p {
  font-size: 16.001px;
}

.pintuan p span:nth-of-type(1) {
  margin-left: 10.001px;
  margin-right: 6px;
}

.pintuan p span {
  font-size: 10.001px;
  border: 1.001px solid #d1a7be;
  border-radius: 4.999px;
  padding: 1.001px;
}

.pintuan .pintuan-price {
  position: relative;
}

.pintuan .pintuan-price i {
  font-size: 7.999px;
}

.pintuan .pintuan-price .now_price {
  font-size: 19.999px;
}

.pintuan .pintuan-price .old_price {
  font-size: 10.999px;
  text-decoration: line-through;
}

.pintuan .pintuan-price .yituan {
  position: absolute;
  bottom: 0;
  right: 0;
}

span:nth-of-type(1) i {
  margin-right: 2.667vw;
}

span i {
  width: 9.067vw;
  height: 9.067vw;
  line-height: 9.067vw;
  border-radius: 50%;
  text-align: center;
  background: #fbfbfb;
}

// header ul {
// display: inline-block;
// }
a {
  // margin: 0 4.8vw;
  color: #444444;
}

.van-nav-bar__right {
  padding: 0;
}
.price del{
  text-decoration: line-through;
  margin-left 4.001px
}

a.active {
  color: red;
  border-bottom: 0.533vw solid red;
}

.main {
  height: 100%;
  z-index: 0;
}

.van-swipe {
  width: 100vw;
  height: 100vw;
}

.van-swipe img {
  width: 100%;
}

.van-swipe .van-swipe__indicators {
  position: absolute;
  bottom: 23.733vw;
  left: 50%;
}

.price {
  line-height: 10.667vw;
  padding-left: 1.333vw;
}

.price i {
  font-size: 2.133vw;
  color: red;
}

.price b {
  font-size: 5.067vw;
  color: red;
}

.price del {
  font-size: 3.2vw;
  color: #9d9d9d;
  text-decoration: line-through;
}

.title-s {
  padding: 0 3.2vw;
  font-weight: 600;
  height: 15.467vw;
}

.SelectName {
  padding-left: 3.2vw;
  font-size: 3.2vw;
  position: relative;
}

.SelectName span.xz {
  color: #9c9c9c;
  margin-right: 4.267vw;
}

.arrow {
  position: absolute;
  right: 5.333vw;
  top: 0;
}

.clolr_mod {
  margin-top: 3.467vw;
  margin-left: 12.8vw;
}

.clolr_mod span {
  width: 8vw;
  height: 8vw;
  display: inline-block;
  margin-right: 2.667vw;
}

.clolr_mod span img {
  width: 100%;
}

.clolr_mod i {
  display: inline-block;
  width: 17.067vw;
  line-height: 8.533vw;
  text-align: center;
  background: #f8f8f8;
  font-size: 2.4vw;
  color: #bdbdbd;
}

// 购物车弹出层
.cart-popup {
  z-index: 1000;
}

.card-header {
  padding: 2.667vw 2.667vw 5.867vw 2.667vw;
  border-bottom: 0.133vw solid #f2f2f2;
  height: 32vw;
}

.card-header img {
  width: 26.667vw;
  height: 26.667vw;
  border: 0.267vw solid #f6f6f6;
  float: left;
  margin-right: 3.733vw;
}

.card-header .price {
}

.card-header .price span {
  color: #eb5952;
  font-size: 2.667vw;
}

.card-header .price span strong {
  font-size: 3.733vw;
}

.color {
  margin: 0.1rem 0;
}

.card-header .price i {
  background: #eb5952;
  color: #fff;
  padding: 0 1.067vw;
  border-radius: 1.333vw;
  margin: 0 1.6vw;
}

.card-header .stock {
  color: #999;
  font-size: 3.2vw;
  height: 4vw;
  margin-bottom: 1.333vw;
  margin-top: -4.533vw;
}

.card-header .price .prop {
  font-size: 3.2vw;
  color: #404040;
}

// 配送板弹出层
.ps{

}
.ps h1{
  line-height 49.999px
  font-size 15px
  border-bottom: 1.001px solid #f2f2f2;
  padding 0 16.001px
}
.ps ul li{
  font-size 13.999px
  padding 13.001px 10.001px
  border-bottom 0.499px solid #f2f2f2;
  
}
.ps ul li input{
  float right
  position relative
  top 4.999px
}
.ps ul .chooseOther span{
  float right
  position relative
  top -4.999px
  font-size 18px
  color #999
}


// 购物车颜色选择
.popupSkuArea {
  padding: 2.667vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popupSkuArea color {
  font-size: 4.267vw;
  line-height: 4.8vw;
  color: #000000;
}

.popupSkuArea .h {
}

.popupSkuArea .sku_choose {
  border-bottom: 0.133vw solid #f2f2f2;
  padding: 3.733vw 0;
}

.popupSkuArea .sku_choose .item {
  line-height: 7.467vw;
  background: #f5f5f5;
  border-radius: 2.667vw;
  margin: 0 2.667vw 2.667vw 0;
  padding: 0 4vw;
  border: 0.267vw solid #f5f5f5;
}

.popupSkuArea .sku_choose .active {
  border: 0.267vw #f40441 solid;
  color: #f40441;
  background: #f7e7f1;
}

.popupSkuArea .sku_kind {
  display: flex;
  flex-wrap: wrap;
}

// 购物车商品数量选择
.pop-count {
  padding: 4vw 2.667vw 2.667vw;
  font-size: 3.733vw;
  line-height: 6.933vw;
  box-sizing: content-box;
}

.pop-count .count {
}

.pop-count .num {
  float: right;
  font-size: 3.2vw;
  border: 0.267vw solid #f6f6f6;
  display: inline-block;
}

.minusBtn, .addBtn {
  display: inline-block;
  width: 6.667vw;
  line-height: 6.667vw;
  text-align: center;
}

.pop-count .num input {
  display: inline-block;
  vertical-align: top;
  width: 12vw;
  height: 6.667vw;
  background: #f6f6f6;
  border: none;
  text-align: center;
  color: #333 !important;
}

// 加入购物车按钮
.pop-btns {
  display: flex;
  font-size: 4.533vw;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.pop-btns .btn {
  flex: 1;
  border: none;
  text-align: center;
  height: 13.067vw;
  align-self: center;
  color: #fff;
}

.pop-btns .l_btn {
  background: #fe6e6e;
}

.pop-btns .r_btn {
  background: #ea4141;
}

.serveic {
  line-height: 12.267vw;
  border-top: 0.267vw solid #f4f4f4;
  padding: 0 2.667vw;
  margin-top: 1.867vw;
}

.serveic span {
  font-size: 3.467vw;
  color: #a9a9a9;
  margin-right: 4.8vw;
}

.serveic span:before {
  content: '●';
  color: #c52854;
  font-size: 1.067vw;
  margin-right: 1.6vw;
}

.serveic i {
  position: relative;
  right: -2.133vw;
}

.content {
  padding-top: 10.667vw;
}

.content span:before {
  content: '●';
  color: #c52854;
  font-size: 1.067vw;
  margin-right: 1.6vw;
}

.content span:last-child:before {
  content: '';
}

.content span:last-child {
  color: #fff;
}

.content span {
  font-weight: 600;
  font-size: 3.733vw;
  color: #141414;
  line-height: 4.8vw;
  padding: 0 4.267vw;
}

.content p {
  margin-left: 5.333vw;
  line-height: 5.333vw;
  font-size: 3.2vw;
  color: #848484;
  margin-bottom: 4.8vw;
}

.van-action-sheet {
  height: 120vw;
}

.address {
  padding: 0 2.667vw;
  line-height: 13.333vw;
}

.state, .yunfei {
  position: relative;
  border-bottom: 0.267vw solid #f7f7f7;
}

.state span, .yunfei span {
  font-size: 3.2vw;
  color: #999999;
  margin-right: 5.333vw;
}
.yunfei span:nth-of-type(2){
  margin-left 14px
}

.state span:nth-of-type(2), .yunfei span:nth-of-type(2) {
  font-size: 3.733vw;
  color: #404040;
}

.state .arrow, .yunfei .arrow {
  position: absolute;
  right: 2.667vw;
  top: 5.333vw;
}

// 吸底购物车
.addCart {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 13.867vw;
  z-index: 1000;
  overflow: hidden;
  width: 100%;
}

.addCart a {
  width: 15%;
  float: left;
  position: relative;
}

.addCart a .cartCount {
  width: 3.733vw;
  line-height: 3.733vw;
  border-radius: 50%;
  text-align: center;
  background: #f63d45;
  display: inline-block;
  position: absolute;
  right: 2.133vw;
  top: 1.067vw;
  color: #fff;
  font-size: 1.6vw;
}

.addCart .cartRight {
  line-height: 13.867vw;
  text-align: center;
  width: 70%;
  float: left;
  background: #ea4241;
  color: #f4eadb;
.footurl {
  margin-top: 0.02rem;
}

.footurl img {
  width: 100%;
}
</style>